<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%String path = request.getContextPath(); %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>参数设置</title>
		<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	    <link href="../plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	    <link href="css/font-awesome.min.css" rel="stylesheet">
	    <link href="css/animate.css" rel="stylesheet">
	    <link href="css/style.css" rel="stylesheet">
		<link href="../plugins/iCheck/custom.css" rel="stylesheet">
		
		<style type="text/css">
			.table {width: 100%;margin-bottom: 0px;}
			.btn-left-no-radius{border-bottom-left-radius: 0; border-top-left-radius: 0;}
			.btn-toobr{margin-bottom: 0px;height:34px}
			.bootstrap-table{margin-top: -50px}
			.pagination-detail{margin: 0px;}
			.pull-left.pagination-detail{margin-top: 5px;}
		</style>
	</head>
	<body class="gray-bg" >
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
	            <div class="col-sm-12">
	                <div class="ibox float-e-margins">
	                    <div class="ibox-title">
	                        <h5>自定义响应式表格</h5>
	                        <div class="ibox-tools">
	                            <a class="collapse-link">
	                                <i class="fa fa-chevron-up"></i>
	                            </a>
	                        </div>
	                    </div>
	                    <div class="ibox-content">
	                    	<div id="toolbar" class="btn-group">
					            <button id="enum_btn_add" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
					            </button>
					            <button id="enum_btn_edit" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
					            </button>
					            <button id="enum_btn_delete" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
					            </button>
					        </div>
	                    	<table id="tb_departments" ></table>
	                    </div>
	                </div>
	            </div>
	            <div class="col-sm-12">
	                <div class="ibox float-e-margins">
	                    <div class="ibox-title">
	                        <h5>自定义响应式表格</h5>
	                        <div class="ibox-tools">
	                            <a class="collapse-link">
	                                <i class="fa fa-chevron-up"></i>
	                            </a>
	                        </div>
	                    </div>
	                    <div class="ibox-content">
	                    	<div id="toolbar" class="btn-group">
					            <button id="enum_btn_ad_c" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
					            </button>
					            <button id="enum_btn_edit_c" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
					            </button>
					            <button id="enum_btn_delete_c" type="button" class="btn btn-primary btn-outline">
					                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
					            </button>
					        </div>
	                    	<table id="tb_departments_child" ></table>
	                    </div>
	                </div>
	            </div>
	        </div>
	        
	    </div>
	</body>
	<!--  全局 -->
	<script src="../rec/js/jquery-1.8.3.min.js"></script>
    <script src="<%=path %>/view/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    
    <!-- 自定义js -->
    <script src="js/contabs.js"></script>
    
    <!-- Bootstrap table -->
    <script src="<%=path %>/view/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="<%=path %>/view/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="<%=path %>/view/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    
    <script type="text/javascript">
	    $(function () {
	
	        //1.初始化Table
	        var oTable = new TableInit();
	        oTable.Init();
	        var cTable = new TableChildInit();
	        cTable.Init();
			
	        //2.初始化Button的点击事件
	        //var oButtonInit = new ButtonInit();
	        //oButtonInit.Init();
	
	    });
	    var TableInit = function () {
	        var oTableInit = new Object();
	        //初始化Table
	        oTableInit.Init = function () {
	            $('#tb_departments').bootstrapTable({
	                url: 'getEnumsList',         //请求后台的URL（*）
	                method: 'get',                      //请求方式（*）
	                //toolbar: '#toolbar',              //工具按钮用哪个容器
	                striped: true,                      //是否显示行间隔色
	                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                pagination: true,                   //是否显示分页（*）
	                sortable: false,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                //queryParams: oTableInit.queryParams,//传递参数（*）
	                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	                pageNumber:1,                       //初始化加载第一页，默认第一页
	                pageSize: 5,                       //每页的记录行数（*）
	                pageList: [5],        //可供选择的每页的行数（*）
	                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	                strictSearch: true,
	                showColumns: true,                  //是否显示所有的列
	                showRefresh: true,                  //是否显示刷新按钮
	                minimumCountColumns: 2,             //最少允许的列数
	                clickToSelect: true,                //是否启用点击选中行
	                //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
	                //showToggle:true,                  //是否显示详细视图和列表视图的切换按钮
	                //cardView: false,                  //是否显示详细视图
	                detailView: false,                  //是否显示父子表
	                singleSelect : true,                // 禁止多选
	                columns: [{
	                    checkbox: true
	                }, {
	                    field: 'enum_no',
	                    title: '参数编号'
	                }, {
	                    field: 'ekey',
	                    title: '参数KEY'
	                }, {
	                    field: 'evalue1',
	                    title: '参数描述'
	                }, {
	                    field: 'update_time',
	                    title: '更新时间'
	                }, ]
	            });
	        };

	        //得到查询的参数
	        oTableInit.queryParams = function (params) {
	            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	                limit: params.limit,   //页面大小
	                offset: params.offset,  //页码
	                departmentname: $("#txt_search_departmentname").val(),
	                statu: $("#txt_search_statu").val()
	            };
	            return temp;
	        };
	        return oTableInit;
	    };
	    var TableChildInit =  function() {
	        var oTableInit = new Object();
	        //初始化Table
	        oTableInit.Init = function () {
	            $('#tb_departments_child').bootstrapTable({
	                url: 'getEnumsList',         //请求后台的URL（*）
	                method: 'get',                      //请求方式（*）
	                //toolbar: '#toolbar',              //工具按钮用哪个容器
	                striped: true,                      //是否显示行间隔色
	                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                pagination: true,                   //是否显示分页（*）
	                sortable: false,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                //queryParams: oTableInit.queryParams,//传递参数（*）
	                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	                pageNumber:1,                       //初始化加载第一页，默认第一页
	                pageSize: 5,                       //每页的记录行数（*）
	                pageList: [5],        //可供选择的每页的行数（*）
	                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	                strictSearch: true,
	                showColumns: true,                  //是否显示所有的列
	                showRefresh: true,                  //是否显示刷新按钮
	                minimumCountColumns: 2,             //最少允许的列数
	                clickToSelect: true,                //是否启用点击选中行
	                //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
	                //showToggle:true,                  //是否显示详细视图和列表视图的切换按钮
	                //cardView: false,                  //是否显示详细视图
	                detailView: false,                  //是否显示父子表
	                singleSelect : true,                // 禁止多选
	                columns: [{
	                    checkbox: true
	                }, {
	                    field: 'enum_no',
	                    title: '参数编号'
	                }, {
	                    field: 'ekey',
	                    title: '参数KEY'
	                }, {
	                    field: 'evalue1',
	                    title: '参数描述'
	                }, {
	                    field: 'update_time',
	                    title: '更新时间'
	                }, ]
	            });
	        };

	        //得到查询的参数
	        oTableInit.queryParams = function (params) {
	            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	                limit: params.limit,   //页面大小
	                offset: params.offset,  //页码
	                departmentname: $("#txt_search_departmentname").val(),
	                statu: $("#txt_search_statu").val()
	            };
	            return temp;
	        };
	        return oTableInit;
	    };
    </script>
</html>